<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { saveRemark } from '@/api/material-receipt';

  const form = ref({
    remark: '',
  });
  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      if (booleanStore.num2 === 3) showDrawer.value = newValue;
    }
  );
  watch(
    () => booleanStore.row,
    () => {
      if (booleanStore.num2 === 3) {
        form.value = {
          remark: '',
        };
      }
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool2(3);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool2(3);
  }
  async function handleOk() {
    if (!form.value.remark) {
      Notification.warning({
        title: '提示',
        content: '请填写备注',
        closable: true,
      });
      return;
    }
    const info: any = {
      remark: form.value.remark,
      dliverys: [booleanStore.row],
    };
    const data = await saveRemark(info);

    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool2(3);
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool2(3);
    }
    booleanStore.watchUpdate(4);
  }
</script>

<template>
  <a-drawer
    :width="450"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 录入备注 </template>
    <div>
      <a-form :model="form" :style="{ width: '400px' }">
        <a-form-item field="name" label="备注:">
          <a-input v-model="form.remark" placeholder="备注" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
